<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
  </head>
  <body>
    <div id="app">
      <!-- 使用的时候一定写成带横杠的 -->
      <!-- 调用组件 -->
      <app-head></app-head>
      <app-nav></app-nav>
      <app-foot></app-foot>
      <banner></banner>
      <app-side></app-side>
    </div>

    <div id="app2">
      <!-- 使用的时候一定写成带横杠的 -->
      <app-head></app-head>
      <app-nav></app-nav>
      <app-foot></app-foot>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    /*
        注册组件：先注册->再调用
            * 全局注册组件：组件就是一个vue实例(但是不用手动实例化,不用new),只要是vue实例都可以使用
                Vue.component('组件名',{})
            * 局部注册组件：只有注册组件的该实例能使用
                new Vue({
                    components : {
                        '组件名' : {//组件名可以写成横杠或驼峰方式，但是推荐横杠的方式

                        }
                    }
                })
      */

    //全局组件注册 app-head ：使用的时候都是横杠的写法(官方推荐)
    Vue.component("app-head", {
      template: "<h1>{{ msg }}</h1>",
      data() {
        return {
          msg: "注册一个全局组件",
        };
      },
    });

    // 注册全局组件 appNav 使用的时候都是横杠的写法
    Vue.component("appNav", {
      template: "<h1>{{ title }}</h1>",
      data() {
        return {
          title: "注册一个导航条",
        };
      },
    });

    //直接写一个单词:不推荐写得太简短
    Vue.component("banner", {
      template: "<h1>{{ title }}</h1>",
      data() {
        return {
          title: "这个是轮播图",
        };
      },
    });

    //局部组件注册
    let appSide = {
      template: "<h2>{{ msg }}</h2>",
      data() {
        return {
          msg: "局部组件注册-分离",
        };
      },
    };

    new Vue({
      //根组件 Root
      el: "#app",
      data: {}, //根组件里面的data是一个对象

      //局部组件注册
      components: {
        "app-foot": {
          template: "<div>这是 {{ name }}</div>",
          data() {
            //组件里面的data必须写成：函数，里面返回一个对象
            //面试题：为什么组件里面的data必须写成一个函数?
            return {
              name: "局部的组件",
            };
          },
        },

        // appSide: appSide,
        appSide,
      },
    });

    new Vue({
      el: "#app2",
    });
  </script>
</html>
